<nz-row class="mb10">
  <nz-col nzSpan="2">
    <button (click)="newEditDemo()" nz-button nzType="primary">
      <span nz-icon nzType="plus"></span>
      新建
    </button>
  </nz-col>
</nz-row>
<nz-row class="mb10">
  <nz-input-group [nzAddOnAfter]="suffixIconButton" [nzSuffix]="inputClearTpl" nzSearch>
    <input #searchRef (keyup)="search$.next($event)" [(ngModel)]="searchText" nz-input placeholder="输入文字进行搜索"
           type="text"/>
  </nz-input-group>
  <ng-template #suffixIconButton>
    <button (click)="search()" nz-button nzSearch nzType="primary"><span nz-icon nzType="search"></span></button>
  </ng-template>
  <ng-template #inputClearTpl>
      <span
              (click)="searchText = '';search()"
              *ngIf="searchText"
              class="ant-input-clear-icon"
              nz-icon
              nzTheme="fill"
              nzType="close-circle"
      ></span>
  </ng-template>
</nz-row>
<nz-row>
  <nz-col nzSpan="24">
    <nz-table #basicTable [nzData]="list"
              [nzFrontPagination]="false"
              [nzScroll]="{ x: '1200px', y: '600px' }"
              [nzShowPagination]="false"
              nzSize="small" nzTableLayout="fixed">
      <thead>
      <tr>
        <th (nzSortOrderChange)="changeOrderFn($event)" [nzShowSort]="true">名称</th>
        <th>简介</th>
        <th>地址</th>
        <th>Git地址</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let data of basicTable.data">
        <td>{{data.name}}</td>
        <td [nzTooltipTitle]="data.description" nz-tooltip nzEllipsis>{{data.description}}</td>
        <td>
          <ng-container *ngIf="data.url">
            <button (click)="jump(data.url)" nz-button nzSize="small" nzType="primary">跳转</button>
            <nz-divider nzType="vertical"></nz-divider>
            <button (click)="copy(data.url)" nz-button nzSize="small" nzType="primary">复制</button>
          </ng-container>
        </td>
        <td>
          <ng-container *ngIf="data.git">
            <button (click)="copy(data.git)" nz-button nzSize="small" nzType="primary">复制</button>
          </ng-container>
        </td>
        <td>
          <button (click)="edit(data)" [nzSize]="'small'" nz-button nzType="primary">编辑</button>
          <nz-divider nzType="vertical"></nz-divider>
          <button (nzOnConfirm)="delete(data)" [nzSize]="'small'" nz-button nz-popconfirm
                  nzDanger nzPopconfirmTitle="确定要删除吗？" nzType="primary">删除
          </button>
        </td>
      </tr>
      </tbody>
    </nz-table>
  </nz-col>
</nz-row>

